<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="UTF-8">
<title>正则表达式</title>
<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>
<script src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
<style type="text/css">
body{
	padding: 10px
}
.res{
	display: inline-block;
	margin : 0px 5px;
	width: 60px;
	height: 20px;
	line-height:20px;
}
input {
	color:blue;
	text-align: center;
	font-size: 1.2em;
	font-weight : bold;
	border-top:none;
	border-left:none;
	border-right:none;
	border-bottom : 1px solid #555;
	background: inherit;
}
.qlist dl{
	padding: 5px;
	border: 1px solid #ccc;
	background: #eee;
	border-radius: 5px;
}
.qlist dl:hover{
	border-color: blue;
}
.qlist{
	overflow: auto; 
}
</style>
</head>
<body>
	<div id="main">
		<fieldset class="alist">
			<legend>正则表达式练习题1 答题结果</legend>
			<span class="res" v-for="q,i in questions">
				题{{i+1}}: <b style="color: red">{{q.result?'对':''}}</b>
			</span>
		</fieldset>
		<fieldset>
			<legend>题目: 请按照要求再横线处填写代码, 浏览器控制台会打印每道题的返回结果</legend>
			<div class="qlist">
			<dl v-for="q,i in questions">
				<dt>第{{i+1}}题 <b style="color: red">{{q.result?'对':''}}</b></dt>
				<dd>
					<span v-html="prefix( q.content )"></span>
					<input @change="test( q, $event )">
					<span v-html="suffix( q.content ) + (q.expect!=undefined?q.expect:'')"></span>
				</dd>
			</dl>
			</div>
		</fieldset>
	</div>
	<script type="text/javascript">
		function Q(content, expect, validate){
			this.content = content;
			this.validate = validate;
			if(expect != undefined) this.expect = expect;
			this.result = false;
		}
		new Vue({
			el : "#main",
			data : {
				questions : [
					new Q("var data = 'CAt';<br>var reg = 答题线; //定义正则表达式判断data中是否包含 At<br>reg.test(data); // 要求返回 ", true),
					new Q("var data = 'Dog Cat dog cat DOG CAT';<br>var reg = 答题线; //定义正则表达式<br>var ret = reg.exec(data);<br>ret == 'dog';// 要求返回 ", true),
					new Q("var data = 'Dog Cat dog cat DOG CAT';<br>var reg = 答题线; //定义正则表达式<br>reg.exec(data).index; // 要求返回 ", 0),
					new Q("var data = 'Dog Cat dog cat DOG CAT';<br>var reg = 答题线; //定义正则表达式<br>reg.exec(data).index; // 要求返回 ", 12),
					new Q("var data = 'CAt';<br>var reg = 答题线; //判断data中是否包含 at(忽略大小写)<br>reg.test(data); // 要求返回 ", true, 
							{expr:/at/,msg:'代码必须包含字符串: at'}),
					new Q("var data = 'CAt';<br>var reg = 答题线; //判断data中是否包含 at(忽略大小写)，请使用new关键字创建正则表达式<br>reg.test(data); // 要求返回 ", true, 
							{expr: new RegExp("new"),msg:'代码必须包含关键字: new'}),
					new Q("var data = '你好世界';<br>var reg = 答题线; //定义正则表达式判断data中是否包含 好 字<br>reg.test(data); // 要求返回 ", true,
							{expr: new RegExp("new"),msg:'代码必须包含关键字: new'}),
					new Q("var data = '正则表达式';<br>var reg = /正则/; <br>reg.答题线(data); // 要求返回 ", true),
					new Q("var data = '正则表达式';<br>var reg = /表达/; <br>var ret = reg.答题线(data);<br>ret.index; // 要求返回 ", 2),
					new Q("var data = '字符串的search方法返回与正则表达式查找内容匹配的第一个子字符串的位置';<br>var reg = /的/; <br>var ret = data.search(reg);<br>ret == 答题线; //  ret的值是多少? 返回 ", true),
					new Q("var data = '字符串的search方法返回与正则表达式查找内容匹配的第一个子字符串的位置';<br>var regex = /c/; <br>var ret = 答题线; // 请填写代码查找<br> ret == 8;// 返回 ", true),
					new Q("var data = '字符串的search方法返回与正则表达式查找内容匹配的第一个子字符串的位置';<br>var r = 答题线; <br>var ret = data.search(r); <br> ret == 5;// 返回 ", true),
					new Q("var data = '字符串的match使用正则表达式模式对字符串执行查找，并将包含查找的结果作为数组返回';<br>var reg = /的/; <br>var r = 答题线;// 查找第一个 \"的\" 字 <br>r.length;// 返回 ", 1),
					new Q("var data = '字符串的match使用正则表达式模式对字符串执行查找，并将包含查找的结果作为数组返回';<br>var regex = /的/g; // 注意这个 g<br>var r = 答题线;// 查找所有的 \"的\" 字 <br>r.length;// 返回 ", 2),
					new Q("var data = '字符串的match使用正则表达式模式对字符串执行查找，并将包含查找的结果作为数组返回';<br>var reg = 答题线; // 查找第一个 \"字符串\" <br>var r = data.match(reg); <br>r.length;// 返回 ", 1),
					new Q("var data = '字符串的match使用正则表达式模式对字符串执行查找，并将包含查找的结果作为数组返回';<br>var regex = 答题线; // 查找所有的 \"查找\" <br>var r = data.match(regex); <br>r.length;// 返回 ", 2,
							{expr: new RegExp("new"),msg:'代码必须包含关键字: new'}),
					new Q("var data = '小猫笑我,我笑猫小';<br>var ret = 答题线;// 替换字符串<br> ret == '小猫笑你,我笑猫小'; // 返回: ",true ),
					new Q("var data = '小猫笑我,我笑猫小';<br>答题线;// 根据结果填写<br>data == '小狗笑我,我笑狗小'; // 返回 ",true),
					new Q("var data = '小明,小红,小黄,小丽';<br>答题线;// 拆分数组<br>arr.length// 返回:", 4),
					new Q("var data = 答题线;// 定义字符串<br>var arr = data.split(/;/);// 拆分数组<br>arr.length// 返回:", 3),
				]
			},
			methods : {
				test(q,event){
					var value = event.srcElement.value;
					if(q.validate){
						if( ! q.validate.expr.test(value)) {
							alert(q.validate.msg);
							q.result = false;
							return;
						}
					}
					var script = q.content.replace(/<br>/gi,'\r\n');
					script = script.replace('答题线',value);
					try{
						var ret = eval(script);
						console.info("您输入的是: " + value + " ,运算的结果如下:");
						console.info(ret);
						q.result = q.expect != undefined ? ret == q.expect : true;
					}catch(e){
						console.error(e);
						q.result = false;
					}
				},
				prefix(text){
					return text.substring(0, text.indexOf('答题线'));
				},
				suffix(text){
					return text.substring(text.indexOf('答题线') + 3);
				}
			},
			
		});
	</script>
</body>
</html>